<template>
  <div class="echaers">
    <div id="line" style="width: 50%; height: 300px;float: left;"></div>
    <div id="aera" style="width: 50%; height: 300px;float: left;"></div>
  </div>
</template>

<script>
//  按需引入Echarts
var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')   //  线状图
require('echarts/lib/chart/bar')    //  柱状图
require('echarts/lib/chart/pie')    //  饼状图
// require('echarts/lib/chart/radar')
require('echarts/lib/component/tooltip')  //  提示框
require('echarts/lib/component/title')  //  title组件
require('echarts/lib/component/legend')  //  图例
require('echarts/lib/component/legendScroll')   //  图例翻译滚动
export default {
  name: 'echaers',
  data () {
    return {
      myChart: '',
      myChart1: '',
      //  线形图
      line: {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
      },
      //  面积堆叠图
      aera: {
        title: {
            text: '堆叠区域图'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
          {
              name:'邮件营销',
              type:'line',
              stack: '总量',
              areaStyle: {},
              data:[120, 132, 101, 134, 90, 230, 210]
          },
          {
              name:'联盟广告',
              type:'line',
              stack: '总量',
              areaStyle: {},
              data:[220, 182, 191, 234, 290, 330, 310]
          },
          {
              name:'视频广告',
              type:'line',
              stack: '总量',
              areaStyle: {},
              data:[150, 232, 201, 154, 190, 330, 410]
          },
          {
              name:'直接访问',
              type:'line',
              stack: '总量',
              areaStyle: {normal: {}},
              data:[320, 332, 301, 334, 390, 330, 320]
          },
          {
              name:'搜索引擎',
              type:'line',
              stack: '总量',
              label: {
                  normal: {
                      show: true,
                      position: 'top'
                  }
              },
              areaStyle: {normal: {}},
              data:[820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    }
  },
  mounted () {
    //  等dom加载完毕时调用，否则echarts会继承整个页面的宽度属性，百分比属性就会失效
    this.$nextTick(() => {
      this.lineChart()  //  线形图
      this.aeraChart()  //  面积堆叠图
    })
  },
  methods: {
    //  线形图
    lineChart () {
      this.myChart = echarts.init(document.getElementById('line'), 'light')
      this.myChart.setOption(this.line)
      var that = this
      window.addEventListener('resize', function () {
        that.myChart.resize()
      })
    },
    //  面积堆叠图
    aeraChart () {
      this.myChart1 = echarts.init(document.getElementById('aera'), 'light')
      this.myChart1.setOption(this.aera)
      var that = this
      window.addEventListener('resize', function () {
        that.myChart1.resize()
      })
    },
  }
}
</script>

<style scoped>
  .echaers{
    width: 100%;
    height: 100%;
  }
  .line>div, .aera>div{
    width: 100% !important
  }
</style>

